E. Wilde: Scripting

(2) Abstract

Scripting is used on the majority of today's modern Web sites. Scripting can be used to improve the usability and accessibility of a Web site (for example for validating form data on the client side), it can vastly improve the user experience with new interface design (the smooth scrolling of Google Maps vs. older click to scroll map services), or it can be used to implement behavior that would be impossible without scripting (for example the online applications of Google Docs). This introductory lecture looks into scripting fundamentals such as JavaScript itself, the Document Object Model (DOM) for accessing the browser window's content, and XMLHttpRequest for script-server communications.

E. Wilde: Scripting

(3) Scripting on the Web

Web pages were static HTML
- HTML Forms [HTML Forms] were the only interactive part of Web pages
- interaction was only possible by clicking links and visiting new pages
- CSS introduced limited dynamic behavior (such as mouseOver events)
Netscape invented the Document Object Model (DOM) [Document Object Model (DOM) (1)] and LiveScript
- Java [http://en.wikipedia.org/wiki/Java_(programming_language)] was new and hip, so the language was renamed to JavaScript [JavaScript (1)]
- pages with scripting (a.k.a. Dynamic HTML or DHTML) allowed richer user interfaces
- other browsers invented their own versions of DOM/JavaScript
Scripting was and is often used to implement missing functionality
- good scripting supports graceful degradation (leaving the page functional)
- bad scripting compromises accessibility when the scripting code does not work
Any non-trivial scripting has to deal with browser differences
- JavaScript Frameworks [JavaScript Frameworks (1)] help by providing a foundation to build on

E. Wilde: Scripting

(5) Basic Scripting (DHTML)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Well-Designed JavaScript</title>
  <script type="text/javascript" src="nicetitle.js"></script>
  <link rel="stylesheet" href="nicetitle.css" />
 </head>
 <body>
  <h1>Well-Designed JavaScript</h1>
  <p><a href="http://en.wikipedia.org/wiki/JavaScript" title="Wikipedia: JavaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites.">JavaScript</a> should not make any assumptions about browser support. Ideally, pages using scripting should also be usable when scripting is turned off, so that more basic browsers (for example, mobile phones or Kindles) can also be used for using the page.</p>
 </body>
</html>

nicetitle.html

E. Wilde: Scripting

(6) Basic Scripting (JavaScript)

    if( !document.links )
    {
        document.links = document.getElementsByTagName("a");
    }
    for (var ti=0;ti<document.links.length;ti++) {
        var lnk = document.links[ti];
        if ( lnk.title ) {
            lnk.setAttribute("nicetitle",lnk.title);
            lnk.removeAttribute("title");
            addEvent(lnk,"mouseover",showNiceTitle);
            addEvent(lnk,"mouseout",hideNiceTitle);
            addEvent(lnk,"focus",showNiceTitle);
            addEvent(lnk,"blur",hideNiceTitle);
        }
    }

nicetitle.js (line 18-32)

    var d = document.createElementNS(XHTMLNS,"div");
    d.className = "nicetitle";
    tnt = document.createTextNode(nicetitle);
    pat = document.createElementNS(XHTMLNS,"p");
    pat.className = "titletext";
    pat.appendChild(tnt);
    d.appendChild(pat);

nicetitle.js (line 78-84)

JavaScript

Outline (JavaScript)

JavaScript [3]
Document Object Model (DOM) [6]
Ajax Basics [2]
JavaScript Frameworks [4]

JavaScript E. Wilde: Scripting

(9) Browsers are Platforms

Runtime environments are critical for running applications
- popular computer environments are Windows, MacOS, Linux, and Java
- popular mobile environments are iPhone, Android, Blackberry, S60, and JavaME/JavaFX
- popular Web-based environments are JavaScript, Flash, and Java applets
- popular Web-oriented environments are Silverlight and AIR
JavaScript is a scripting language supported by most browsers
- access to the current document's DOM [Document Object Model (DOM) (1)] is the most important part of DHTML
- JavaScript has code, functions, and interacts with the user through the browser

<p>It is <script type="text/javascript">
var currentTime = new Date() ;
document.write(currentTime.getHours() + ":" + currentTime.getMinutes()) ;
</script> hours</p>

<p>It is  hours</p>

JavaScript E. Wilde: Scripting

(10) Compiled vs. Interpreted Languages

Programming languages can be compiled or interpreted
Compilers can do more than just translate
- compiled languages are translated before they can be executed
- check the code for errors that can be determined statically
- augment the code for performance or analysis purposes
Interpreters provide a less heavyweight environment
- interpreted languages can be executed directly
- any change in the code can be tested immediately
- less tightly coupled software bundles than compiled packages
Scripting has become much more popular in the past years
- server-side languages such as PHP, Ruby/Rails, and Python

JavaScript E. Wilde: Scripting

(11) JavaScript and Browsers

Scripting used to be too slow for serious applications
- processors have become much faster
- language interpreters have become much smarter
Implementations now deliver high-performance scripting
- Safari uses the SquirrelFish JavaScript engine [http://trac.webkit.org/wiki/SquirrelFish]
- Chrome uses the V8 JavaScript engine [http://code.google.com/p/v8/]
Modern implementations allow sophisticated applications
- Google Docs [http://docs.google.com/] is a set of browser-based desktop applications
- Processing.js [http://ejohn.org/blog/processingjs/] is a JavaScript version of a popular visualization environment

Document Object Model (DOM)

Outline (Document Object Model (DOM))

JavaScript [3]
Document Object Model (DOM) [6]
Ajax Basics [2]
JavaScript Frameworks [4]